<template>
  <div
    :class="className"
    :style="{height:height,width:width}"
  />
</template>

<script>
import echarts from 'echarts' // echarts theme
import { debounce } from '@/utils'
require('echarts/theme/macarons')

export default {
  props: {
    className: {
      type: String,
      default: 'chart'
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '100%'
    },
    chartData: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      chart: null
    }
  },
  watch: {
    chartData: {
      deep: true,
      handler(val) {
        this.setOptions(val)
      }
    }
  },
  mounted() {
    this.initChart()
    this.__resizeHandler = debounce(() => {
      if (this.chart) {
        this.chart.resize()
      }
    }, 100)
    window.addEventListener('resize', this.__resizeHandler)
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    window.removeEventListener('resize', this.__resizeHandler)
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    initChart() {
      this.chart = echarts.init(this.$el, 'macarons')
      this.setOptions(this.chartData)
    },
    setOptions({ name, data }) {
      this.chart.setOption({
        tooltip: {
          trigger: 'axis'
        },
        grid: {
          top: '20%',
          left: '20',
          right: '1%',
          bottom: '8%',
          containLabel: true
        },
        xAxis: [{
          type: 'category',
          boundaryGap: true,
          axisLine: { // 坐标轴轴线相关设置。数学上的x轴
            show: true,
            lineStyle: {
              color: 'rgba(0, 211, 255, 0.1)'
            }
          },
          axisLabel: { // 坐标轴刻度标签的相关设置
            textStyle: {
              color: 'rgba(54, 196, 255, 0.7)',
              margin: 15
            }
          },
          axisTick: {
            show: false
          },
          data: data.name
        }],
        yAxis: [{
          name: '指数值',
          nameTextStyle: {
            color: 'rgba(54, 196, 255, 0.7)',
            fontSize: 12,
            padding: [0, 0, 0, -60]
          },
          type: 'value',
          splitLine: {
            show: false,
            lineStyle: {
              color: 'rgba(0, 154, 255, 0.2)'
            }
          },
          axisLine: {
            show: false
          },
          splitArea: { show: false },
          axisLabel: {
            margin: 20,
            textStyle: {
              color: 'rgba(54, 196, 255, 0.7)'
            }
          },
          axisTick: {
            show: false,
            lineStyle: {
              color: 'rgba(0, 154, 255, 0.4)'
            }
          }
        },
        {
          type: 'value',
          name: '预测值',
          nameTextStyle: {
            color: 'rgba(54, 196, 255, 0.7)',
            fontSize: 12,
            padding: [0, 0, 0, -40]
          },
          axisLabel: {
            textStyle: {
              color: 'rgba(54, 196, 255, 0.7)'
            },
            show: false
          },
          axisLine: {
            lineStyle: {
              color: 'rgba(54, 196, 255, 0.7)'
            },
            show: false
          },
          splitArea: { show: true },
          axisTick: {
            show: false
          },
          splitLine: {
            show: false,
            lineStyle: {
              color: 'rgba(0, 154, 255, 0.4)'
            }
          }
        }],
        series: [{
          name: '指数值',
          type: 'bar',
          barWidth: this.echartsToRem(20),
          itemStyle: {
            normal: {
              barBorderRadius: [10, 10, 0, 0],
              color: new echarts.graphic.LinearGradient(
                0, 0, 0, 1, [{
                  offset: 0,
                  color: 'rgba(101, 239, 255, 1)'
                },
                {
                  offset: 1,
                  color: 'rgba(0, 154, 255, 0)'
                }
                ]
              )
            }
          },
          data: data.data1
        }, {
          name: '预测值',
          type: 'line',
          showAllSymbol: true,
          symbol: 'circle',
          symbolSize: 6,
          lineStyle: {
            normal: {
              color: '#FFC273' // 线条颜色
            }
          },
          label: {
            show: false
          },
          itemStyle: {
            normal: {
              color: '#FFC273', // 这里设置的拐点颜色
              borderColor: 'rgba(0, 0, 0, 0.6)', //  拐点边框颜色
              borderWidth: 3 //  拐点边框宽度
            }
          },
          areaStyle: { // 区域填充样式
            normal: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'rgba(10, 255, 143, 0.1)' },
                { offset: 1, color: 'rgba(10, 255, 143, 0)' }
              ], false)
            }
          },
          data: data.data2
        }]
      }, true)
    }
  }
}
</script>
